<template>
    <div class="swiper-container" :id="id">
        <div class="swiper-wrapper">
            <slot></slot>
        </div>
    </div>
</template>


<script>
import Swiper from "swiper"
import "swiper/dist/css/swiper.min.css";

export default {
    props:{
      id:{
        type:String,
        default:'onebanner'
      },
      options:{
        type:Object,
        default:{
          autoplay:3000,
          observer:true,
        }
      }
    },
    data(){
      return {
        myswiper:null
      }
    },
    methods:{
      slide(index){
        this.myswiper.slideTo(index)
      }
    },
    mounted(){
      //  实例化  
      console.log(this.options)
      this.$nextTick(()=>{
         this.myswiper = new Swiper("#"+this.id,this.options)
      })
    }
}
</script>
